<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>数字化转型创意大赛决赛</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">

    <!-- Custom styles for this template -->
    <style>
        /*
 * Globals
 */

        /* Links */

        a,
        a:focus,
        a:hover {
            color: #fff;
        }

        /* Custom default button */

        .btn-secondary,
        .btn-secondary:hover,
        .btn-secondary:focus {
            color: #333;
            text-shadow: none;
            /* Prevent inheritance from `body` */
            background-color: #fff;
            border: .05rem solid #fff;
        }


        /*
 * Base structure
 */

        html,
        body {
            height: 100%;
            background-color: #319C8B;
        }

        body {
            display: -ms-flexbox;
            display: -webkit-box;
            display: flex;
            -ms-flex-pack: center;
            -webkit-box-pack: center;
            justify-content: center;
            text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
            box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
        }


        .cover-container {
            min-width: 96%;
        }

        /*
 * Header
 */

        .masthead {
            margin-bottom: 2rem;
        }

        .masthead-brand {
            margin-bottom: 0;
            color: white;
            font-size: 40px;
        }

        .nav-masthead .nav-link {
            padding: .25rem 0;
            font-weight: 700;
            color: rgba(255, 255, 255, .5);
            background-color: transparent;
            border-bottom: .25rem solid transparent;
        }

        .nav-masthead .nav-link:hover,
        .nav-masthead .nav-link:focus {
            border-bottom-color: rgba(255, 255, 255, .25);
        }

        .nav-masthead .nav-link+.nav-link {
            margin-left: 1rem;
        }

        .nav-masthead .active {
            color: #fff;
            border-bottom-color: #fff;
        }

        @media (min-width: 48em) {
            .masthead-brand {
                float: left;
            }
            .nav-masthead {
                float: right;
            }
        }


        /*
 * Cover
 */

        .cover {
            padding: 0 1.5rem;
        }

        .cover .btn-lg {
            padding: .75rem 1.25rem;
            font-weight: 700;
        }


        /*
 * Footer
 */

        .mastfoot {
            color: rgba(255, 255, 255, .5);
        }

        .card-title {
            font-size: 14px;
            text-align: left;
        }

        .card-text,
        .card-text .badge {
            font-size: 20px;
        }
        .card-body{
        		padding:0.6rem;
        }
    </style>
</head>

<body class="text-center">

    <div class="cover-container d-flex h-100 p-3 mx-auto flex-column" id="app">
        <header class="masthead mb-auto">
            <div class="inner">
                <h3 class="masthead-brand">
                    <img src="/static/logo.png" height="100" /> 重温红色经典 牢记初心使命
                </h3>
            </div>
        </header>

        <div class="row justify-content-md-center" style="margin-top: 200px;margin-bottom:100px;">
        		<div class="col-sm-8" style="background-color:white;padding:30px 20px;border-radius:10px;">
	            <h3>{{innovate.title}}</h3>
	            <p  v-html="innovate.description"></p>
	            <h1 v-if="innovate.statu == 2"><span class="badge badge-primary">最后得分：{{innovate.score.toFixed(2)}}</span></h1>
	        		<h1 v-if="innovate.statu == 1"><span class="badge badge-secondary">正在评分</span></h1>
        		</div>
        </div>

        <footer class="mastfoot mt-auto">
            <div class="inner" style="font-size: 20px;">
                <p>科技与产品管理部 软件开发一部</p>
            </div>
        </footer>

       
    </div>




    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.0"></script>
    <script src="/static/common.js"></script>

    <script>
        new Vue({
		el: '#app',
		data: {
			innovate: {
				id: null,
				title: '',
				description: '',

			}
			
		},
		methods: {
			
			loadInnovate: function () {
				var vm = this;
				var innId = getQueryString('id');
				this.$http.get('/getInnovateItem?id=' + innId).then(response => {
					if (response.body.success) {
						vm.innovate = response.body.data;
					}
					else {
						alert(response.body.msg);
					}
				}, response => {
					alert('数据加载失败');
				});
			}
		},
		mounted: function () {
			document.getElementById('app').setAttribute('class','');
			var vm = this;
			this.$nextTick(function () {
				vm.loadInnovate();
			})
		}
	});
    </script>
</body>

</html>